<script setup>
import { ref, onMounted } from 'vue'
import { getOwnKnowledgeAPI, delKnowledgeAPI } from '@/apis/knowledge'

const knowledgeList = ref([])

const delKnowledge = async (id) => {
    const res = await delKnowledgeAPI(id)
    if (res.code === 2000) {
        getOwnKnowledge()
        ElMessage({ type: 'success', message: '删除成功' })
    }
}

const getOwnKnowledge = async () => {
    const res = await getOwnKnowledgeAPI()
    if (res.code === 2000) {
        knowledgeList.value = res.data
    }
}

onMounted(() => {
    getOwnKnowledge()
})
</script>

<template>
<div class="knowledge-page">
    <div class="page-title">我的发布</div>
    <RouterLink to="/editor" class="add-btn">发布知识</RouterLink>
    <div class="knowledge-list">
        <div class="knowledge-card" v-for="i in knowledgeList" :key="i.id">
            <div class="info">
                <div class="cover"><img :src="i.pic" alt=""></div>
                <div class="text">
                    <div class="title">{{ i.title }}</div>
                    <div class="content">{{ i.content }}</div>
                </div>
            </div>
            <div class="operation">
                <!-- <a href="javascript:;">编辑</a> -->
                <RouterLink :to="`/knowledgeDetail/${i.id}`">查看</RouterLink>
                <el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="delKnowledge(i.id)">
                    <template #reference>
                        <a href="javascript:;">删除</a>
                    </template>
                </el-popconfirm>
            </div>
        </div>
    </div>
</div>
</template>

<style scoped lang='scss'>
.knowledge-page {
    width: 100%;
    height: 100%;
    padding: 20px 40px;
    background-color: #fff;
}

.add-btn {
    display: block;
    width: 90px;
    height: 35px;
    line-height: 35px;
    border-radius: 4px;
    font-size: 14px;
    color: #fff;
    background-color: #39bf3e;
    text-align: center;
    margin: 20px 0;
}

.page-title {
    font-size: 21px;
    padding: 15px 0;
    border-bottom: 1px solid #e8e8e8;
}

.knowledge-list {
    margin-top: 20px;
}

.knowledge-card {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 20px;
    user-select: none;

    .info {
        display: flex;
    }

    .cover {
        width: 160px;
        height: 120px;
        margin-right: 15px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 500px;
        height: 120px;

        .title {
            height: 25px;
            font-weight: bold;
        }

        .content {
            width: 100%;
            height: 90px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 4; /* 限制显示行数 */
            -webkit-box-orient: vertical;
        }
    }

    .operation {
        display: flex;
        align-items: center;

        a {
            display: inline-block;
            margin: 0 8px;
            font-size: 14px;
            color: #39bf3e;
        }
    }
}
</style>
